<template>
  <div class="record">
    <el-dialog title="报警记录" :visible.sync="recordVisible" width="50%">
      <el-table :data="tablelist"  :default-sort = "{prop: 'bjsj', order: 'descending'}" border v-loading="listLoading" >
        <el-table-column prop="fqbh" label="防区编号"></el-table-column>
        <el-table-column prop="bjsj" label="报警时间" sortable></el-table-column>
        <el-table-column prop="fqmc" label="防区名称"></el-table-column>
        <el-table-column prop="szqy" label="所在区域"></el-table-column>
        <el-table-column prop="bjzt" label="报警状态">
          <template slot-scope="scope">
            <p>{{
              scope.row.bjzt=="0" ?"报警" :"消警"
              }}</p>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          class="pagination"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[10,20,50,100]"
          :page-size="limit"
          layout="total, sizes, prev, pager, next, jumper"
          background
          :total="total">
        </el-pagination>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="recordVisible = false" class="button">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {recardRQBJ} from '@/api/systemIntegration/recard'
export default {
  name: 'record',
  data() {
    return {
      recordVisible:false,
      tablelist: [],
      listLoading: false,
      total: 0,
      bh:'',
      limit:10,
      page:1,
    }
  },
  methods:{
    initRecord(fqbh) {
      this.bh = fqbh
      this.recordVisible = true
      this.getTableList(fqbh)
    },
    getTableList(bh) {
      this.listLoading = true
      let query = {limit :this.limit, page :this.page,bh}
      let limit = this.limit
      let page = this.page
      recardRQBJ(bh,limit,page,query).then((data) => {
        let result = data.msg.replace(/[\\]/g, '')
        let res = JSON.parse(result)
        this.tablelist = res.data
        this.total = this.tablelist.length;
      })
      this.listLoading = false
    },
    handleSizeChange(val) {
      this.limit = val
      this.getTableList(this.bh)
    },
    handleCurrentChange(val) {
      this.page = val
      this.getTableList(this.bh)
    }
  }
}
</script>
<style lang="scss" scoped>
  .record {
    position: relative;
    >>>.pagination {
      position: absolute;
      left: 50%;
      top: 80%;
      transform: translate(-50%, -50%);
    }
    .dialog-footer {
      margin-top: 100px;
    }
  }
</style>